<template>
  <plain-page>
    <el-container style="justify-content:center">
      <el-aside width="500px" style="box-shadow:none">
        <el-card shadow="never" style="height: calc(100% - 2px);">
          <span slot="header">费用类别目录</span>
          <el-tree
            ref="tree"
            :data="categories"
            node-key="id"
            :props="{
              children: 'children',
              label: 'name'
            }"
            default-expand-all
            @node-click="onCategoryNodeClick"
          >
            <template v-slot="{node, data}">
            <span class="tree-node">
              <span :class="{'el-icon-folder': !data.price}">&nbsp;{{node.label}}</span>
              <span style="margin-left: 46px;">
                <el-button
                  v-if="!data.price"
                  type="primary"
                  icon="el-icon-plus"
                  size="mini"
                  plain
                  circle
                  @click.stop="onAddClick(data)"
                />
                <delete-confirm-button
                  v-if="data.id > 0"
                  icon
                  size="mini"
                  @ok="onDeleteClick(data)"
                />
                <empty-button v-else width="38px" />
              </span>
            </span>
            </template>
          </el-tree>
        </el-card>
      </el-aside>
      <el-card ref="listCard" shadow="never">
        <span slot="header">费用类别</span>
        <data-table-app-view :containerSubtractHeight="58">
          <data-table
            ref="table"
            url="/api/community/bedChargeCategory/charges"
            lazy
            :pagination="{pageSize: 50}"
          >
            <el-table-column prop="name" label="费用类别名称" width="300" show-overflow-tooltip></el-table-column>
            <el-table-column prop="price" label="每月价格" width="80"></el-table-column>
            <el-table-column prop="note" label="描述" width="260" show-overflow-tooltip></el-table-column>
          </data-table>
        </data-table-app-view>
      </el-card>
    </el-container>

    <add-type ref="addType" />
  </plain-page>
</template>

<script>
import AddType from './AddType';

export default {
  pageProps: {
    title: '费用类别设置'
  },
  components: {
    AddType
  },
  data() {
    return {
      categories: []
    }
  },
  mounted() {
    this.queryTree();
    this.$refs.table.query({resthomeId: this.$params.id});
  },
  methods: {
    async queryTree() {
      this.categories = [{
        id: 0,
        name: '全部费用类别',
        resthomeId: this.$params.resthomeId,
        children: await this.$http.get('/api/community/bedChargeCategory/tree',
        {params: {resthomeId: this.$params.resthomeId}})
      }];
    },
    onCategoryNodeClick(node) {
      if (node.children.length) {
        this.$refs.table.query({resthomeId: this.$params.resthomeId, parentId: node.id});
      } else {
        this.$refs.table.clear();
      }
    },
    onAddClick(category) {
      this.$refs.addType.show({
        category,
        onSuccess: () => {
          this.queryTree();
          this.$refs.table.query({parentId: category.id});
        }
      });
    },
    async onDeleteClick(category) {
      const ret = await this.$http.delete('/api/community/bedChargeCategory', {params: {id: category.id}});
      if (ret.success) {
        this.$message.success('删除成功');
        this.queryTree();
      } else {
        this.$message.error({2: '下面有子分类，不能删除'}[ret.code]);
      }
    }
  }
}
</script>

<style scoped>
>>> .el-tree-node__content {
  height: 40px;
}
.tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}
</style>